<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" label-width="80px" class="el-form">
      <el-row el-row type="flex" justify="space-between" :gutter="16">
        <el-col :span="18">
          <el-row>
            <el-col :span="8">
              <el-form-item label="指标类型:" prop="indexType">
                <el-select v-model="queryParams.indexType" placeholder="选择指标类型" clearable
                  @change="indicatorTypeChange">
                  <el-option label="燃油" value="1"></el-option>
                  <el-option label="新能源" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <div class="card-wrap card-padding">
      <div class="table-title-wrap " >
        <span style="margin-right: 20px;">指标总数量：
          <span style="color: rgb(64, 158, 255)">{{ indexTotal }}</span>
        </span>
        <span style="margin-right: 20px">燃油指标总数量：
          <span style="color: rgb(64, 158, 255)">{{ fuelNum }}</span>
        </span>
        <span style="margin-right: 20px">新能源指标总数量：
          <span style="color: rgb(64, 158, 255)">{{ newEnergyNum }}</span>
        </span>
      </div>
      <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @setSizeCurrent="getList" :isIndex="true" border>

        <template slot="tableCol">
          <el-table-column label="来源" prop="source" width="120" />
          <el-table-column label="申请城市" prop="cityName" min-width="100" />
          <el-table-column label="申请时间" width="140" prop="applyTime" />
          <el-table-column label="指标类型：燃油数量" min-width="150" prop="fuelNum" />
          <el-table-column label="申请方式" width="96" prop="fuelMethod" />
<!--          <el-table-column label="申请保证金金额" min-width="130" prop="fuelEarnestMoney" />-->
<!--          <el-table-column label="竞拍合计金额" width="120" prop="fuelAuctionMoney" />-->
          <el-table-column label="指标类型：新能源数量" min-width="160" prop="newEnergyNum" />
          <el-table-column label="申请方式" min-width="100" prop="newEnergyMethod"/>
          <el-table-column label="申请保证金金额" min-width="130" prop="newEnergyEarnestMoney" />
          <el-table-column label="竞拍合计金额" min-width="120" prop="newEnergyAuctionMoney" />
          <el-table-column label="申请人" width="120" prop="applyBy" />

        </template>
      </table-page>
    </div>
  </div>
</template>

<script>
import {
  getListInfo
} from "@/api/IndexManagement/IndexManagement.js";

import {
  getToken
} from "@/utils/auth";



export default {

  name: "ViewIndexManagement",

  dicts: ['car_business_type', 'work_order_type', 'contract_type'],
  components: {

    // 'e-select': ESelect,
  },
  computed: {

  },
  data() {
    return {

      // 遮罩层
      loading: false,

      // 查询参数
      queryParams: {
        cityName: "",
        indexType: "",
      },

      total: 0,
      dataList: [

      ],
      method: {},
      indexTotal: "",
      fuelNum: "",
      newEnergyNum: "",
    };
  },
  created() {
    this.method = this.$route.query
    this.queryParams.cityName = this.method.cityName
    this.getList();

  },
  methods: {

    indicatorTypeChange(val) {
      if (val) {
        this.queryParams.indexType = val
      } else {
        this.queryParams.indexType = ""
      }
      this.getList()
    },
    /** 查询测试单表列表 */
    getList() {
      this.loading = true;
      getListInfo(this.queryParams).then(res => {
        if (res) {
          const {
            indexTotal, fuelNum,
            newEnergyNum, indexList
          } = res
          this.dataList = indexList
          this.fuelNum = fuelNum
          this.newEnergyNum = newEnergyNum
          this.indexTotal = indexTotal
          this.loading = false;
        }
      });
    },



    /** 搜索按钮操作 */
    handleQuery() {

      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.brandName = ""
      this.queryParams.seriesName = ""
      this.queryParams.modelName = ""
      this.queryParams.violaTimeStatus = ""
      this.resetForm("queryForm");
      this.handleQuery();
    },

    viewOpen(row, type) {
      this.$router.push({
        path: "/cwgd/decorationDetails",
        query: {
          id: row.id,

        }
      })

    },


    handleWork(row) {
      if (row.businessDataId) {
        this.$router.push({
          path: "/cwgd/decorationDetails",
          query: {
            id: row.id,
            businessDataId: row.businessDataId
          }
        })
      } else {
        this.$router.push({
          path: "/cwgd/decorationDetails",
          query: {
            id: row.id,
          }

        })
      }
    },


    /** 导出按钮操作 */
    handleExport() {
      this.download('car/carWorkOrder/export', {
        ...this.queryParams
      }, `上牌工单_${new Date().getTime()}.xlsx`)
    },

  }
};
</script>
<style lang="scss" scoped>
.el-form {
  padding: 18px 20px;
  padding-bottom: 8px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 16px;


  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }

  ::v-deep .el-form-item__label {
    font-size: 14px;
    font-family: 400;
  }
}
</style>
